<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
       <div class="bg">
        <ion-searchbar placeholder="请输入关键字搜索" @click="goSearchPath()"></ion-searchbar>
       </div>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <div class="swiper"> 
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in swiperList" :key="index">
                    <div class="swipertitle">{{ item.title }}</div>
                    <img :src="item.url" alt="">
                </div>
            </div>
        </div>
        <div class="grad">
            <div class="title" @click="goExamList(1)">统考 <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon></div>
            <ion-row>
                <ion-col size="4" v-for="(item, index) of tkList" :key="index" @click="goDownPage($event, item)">
                    <img :src="item.url" alt="">
                    <p class="desc">{{ item.title }}</p>
                </ion-col>
            </ion-row>
        </div>
        <div class="grad">
            <div class="title" @click="goExamList(2)">校考 <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon></div>
            <ion-row>
                <ion-col size="4" v-for="(item, index) of tkList" :key="index" @click="goDownPage($event, item)">
                    <img :src="item.url" alt="">
                    <p class="desc">{{ item.title }}</p>
                </ion-col>
            </ion-row>
        </div>
        <div class="grad">
            <div class="title"  @click="goFileList()">下载专区 <ion-icon class="chevronForwardOutline" :icon="chevronForwardOutline"></ion-icon></div>
            <ion-list>
                <ion-item v-for="(item, index) in fileList" :key="index" @click="goDownPage($event, item)">
                    <ion-avatar slot="start" class="avatar">
                        <img class="avatar" src="@/assets/images/filedown.png">
                    </ion-avatar>
                    <ion-label>
                        <p class="filename">{{ item.title }}</p>
                        <label v-if="item.isMian">会员专享</label><span>{{item.size}}M</span> <span>.</span> <span>{{item.downNum}}W人下载</span>
                    </ion-label>
                </ion-item>
            </ion-list>
        </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonIcon, IonHeader, IonToolbar, IonSearchbar, IonRow, IonCol, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/vue';
import { chevronForwardOutline } from 'ionicons/icons';
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PublicService } from '@/utils/public';
import Swiper from 'swiper';
const publicService = new PublicService();
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonSearchbar, IonIcon, IonRow, IonCol, IonList, IonItem, IonAvatar, IonLabel
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let t: any;
    const state = reactive({
        slideOpts: {   // 滑动配置
            initialSlide: 0,
            speed: 400,
            observer: true, // 修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        },
        fileList: [
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 0
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            }
        ],
        swiperList: [
            {
                title: '考音乐学院到底要不要跑课',
                url: require('@/assets/images/st.png')
            },
            {
                title: '考音乐学院到底要不要跑课',
                url: require('@/assets/images/st.png')
            },
            {
                title: '考音乐学院到底要不要跑课',
                url: require('@/assets/images/st.png')
            }
        ],
        tkList: [
            {
                title: '考音乐学院到底要不要跑课',
                url: require('@/assets/images/111.jpg')
            },
            {
                title: '考音乐学院到底要不要跑课',
                url: require('@/assets/images/111.jpg')
            },
            {
                title: '考音乐学院到底要不要跑课',
                url: require('@/assets/images/111.jpg')
            },
            {
                title: '考音乐学院到底要不要跑课',
                url: require('@/assets/images/111.jpg')
            },
        ]
    })

    onMounted(() => {
        const swiper = new Swiper('.swiper', {
            initialSlide: 0,
            autoplay: true,
            loop: true,
            speed: 400,
            observer: true, // 修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, // 修改swiper的父元素时，自动初始化swiper
            pagination: {
                el: '.swiper-pagination',
            },
        });
    });

    function goExamList(type: number){
        router.push(
            {
                path: '/exam-list',
                query: {
                    type
                }
            }
        );
    }

    function goFileList(){
        router.push(
            {
                path: '/down-file-list'
            }
        );
    }
    // /down-file-list

    function goDownPage(ev: any, data: any){
        router.push(
            {
                path: '/flie-detail',
                query: {
                    ...data
                }
            }
        );
    }

    function goSearchPath(){
        router.push(
            {
                path: '/search-list',
            }
        );
    }

    return {
      ...toRefs(state),
      chevronForwardOutline,
      goExamList,
      goFileList,
      goDownPage,
      goSearchPath
    }
  }
}
</script>
<style lang="scss" scoped>
ion-header{
  ion-toolbar{
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-start: 0px;
    --padding-end: 0px;
  }
  .bg{
    background: url('../../assets/images/titlebg.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 52px;
  }
  ion-searchbar{
    padding-bottom: 0px;
    font-size: 14px;
  }
}
ion-content{
    --padding-start: 10px;
    --padding-end: 10px;
    .swipertitle{
        font-size: 14px;
        color: #1E1E1F;
        margin-bottom: 5px;
        margin-top: 10px;
    }
    .grad{
        margin-top: 20px;
        ion-icon{
            position: relative;
            top: 2px;
            
        }
        .desc{
            font-size: 13px;
            color: #5E6266;
            overflow: hidden;  //超出隐藏
            text-overflow: ellipsis; //文本超出时显示省略号
            white-space: nowrap; //设置文本不换行
        }
        .filename{
            font-weight: bold;
            font-size: 16px;
            color: #1E1E1F;
            margin-bottom: 0px;
            margin-top: 0px;
        }
        span{
            font-size: 12px;
            color: #939699;
        }
        label{
            font-size: 12px;
            color: #fff;
            background: #CA3032;
            padding: 3px 5px;
            margin-right: 5px;
            border-radius: 3px;
        }
    }
}
</style>